import React, { Component } from 'react'
import Couter from '../../components/Couter'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as counerActions from '../../redux/actions/counterAction';

class CounterPage extends Component {
  render() {
    // 注意观察props的属性， 可以看到下面映射的value 和 counterAction对象
    console.log(this.props)
    return (
      <div>
        <h3>同步异步计数器- react-thunk</h3>
        <Couter
          value={this.props.value}
          onIncrementAsync={this.props.counterAction.addCounerAsync}
          onIncrement={this.props.counterAction.addCouner}
          onDecrementAsync={this.props.counterAction.decrementCounerAsync}
          onDecrement={this.props.counterAction.decrementCouner}
        />
      </div>
    )
  }
}

// 将value 映射到props中, 可以将state里面的值，添加到props中
const mapStateToProps = (state) => {
  return {
    value: state.counter
  }
}

// 将action 映射到props中，这样添加后，会在props上多一个counterAction的对象，对象里是各种action函数
// bindActionCreators 是将多个action函数集中到一起
const mapActionToProps = (dispatch) => {
  return {
    counterAction: bindActionCreators(counerActions, dispatch)
  }
}

// connect 是连接react和redux, 使得state里的数据可以直接作用在组件中
export default connect(
  mapStateToProps,
  mapActionToProps
)(CounterPage)